<template>
  <view class="cuSearch" :style="{width: width + 'rpx'}">
    <u-icon name="search" color="#969799" size="28" style="margin-right: 8rpx;"></u-icon>
    <u-input
      :value="value"
      :type="type"
      :border="border"
      style="width: 90%;"
      @input="input"
      @blur="blur"
      @focus="focus"
      :placeholder="placeholder"
      :cursor-spacing="cursorSpacing"
    />
  </view>
</template>

<script>
export default {
  name: 'cu-search',
  data() {
    return {
      value: '',
      height: 0,
    }
  },

  props: {
    // placeholder
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    // 是否显示左侧图标
    showIcon: {
      type: Boolean,
      default: true
    },
    width: {
      type: String | Number,
      default: 458
    },
    cursorSpacing: {
      type: String,
      default: 0,
    },
    // adjustPosition: {
    //   type: Boolean,
    //   default: true,
    // },
  },
  mounted() {},
  methods: {
    input(e){
      console.log(e,33)
      this.$emit('input', e)
      this.$emit('change',e)
    },
    blur(){
      this.$emit('blur');
    },
    focus(){
      this.$emit('focus');
    },
  }
}
</script>

<style scoped lang="scss">
.cuSearch {
  display: flex;
  padding-left: 24rpx;
  width: 458rpx;
  height: 76rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  opacity: 1;
  border: 2rpx solid #dcdde1;
}
</style>